import React  from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List   } from 'antd';

const TodoListUI = (props) => {
    return (
        <div style={{marginTop: '10px', marginLeft: '10px'}}>
            <div>
                <Input
                    style={{width: '300px', marginRight: 10}}
                    value={props.inputValue}
                    placeholder={'please input info'}
                    onChange={props.handleInputChange}

                />
                <Button type="primary" onClick={props.handleBtnClick}>Click</Button>
            </div>

            {/*2 params, item and index, could be passed*/}
            <List
                style={{marginTop: '10px', width: '300px'}}
                bordered
                dataSource={props.list}
                renderItem={(item, index) => (
                    <List.Item onClick={() => {props.handleDeleteItem(index)}} >
                        {item}
                    </List.Item>
                )}
            />
        </div>
    )
};

export default TodoListUI;